<template>
  <div class="team-detail">
    <!-- 头部搜索 -->

    <!-- 团队信息 -->
    <div class="team-info">
      <h2>{{ teamInfo.team_name }}</h2>
      <div class="info-time">预约时间: {{ formatTime(teamInfo.create_time) }}</div>

      <div class="info-main">
        <div class="info-image">
          <el-image :src="teamInfo.team_img" fit="cover"/>
        </div>

        <div class="info-content">
          <div class="info-item">
            <span class="label">联系人姓名:</span>
            <span>{{ teamInfo.contact_name }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系人电话:</span>
            <span>{{ teamInfo.contact_phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">项目简介:</span>
            <span>{{ teamInfo.team_info }}</span>
          </div>

          <div class="vehicle-select">
            <span class="label">请选择:</span>
            <el-radio-group v-model="selectedVehicle">
              <el-radio-button label="small">小型面包车</el-radio-button>
              <el-radio-button label="medium">大型面包车</el-radio-button>
              <el-radio-button label="large">大货车</el-radio-button>
            </el-radio-group>
          </div>

          <div class="package-select">
            <span class="label">是否需要打包:</span>
            <el-radio-group v-model="needPackage">
              <el-radio :label="true">需要</el-radio>
              <el-radio :label="false">不需要</el-radio>
            </el-radio-group>
          </div>

          <div class="action-buttons">
            <el-button type="primary" @click="handleBook">预约</el-button>
            <el-button @click="handleFeedback">反馈</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 团队成员 -->
    <div class="team-members">
      <h3>团队成员</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="member in teamMembers" :key="member.id">
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="member.avatar" class="member-avatar"/>
            <div class="member-info">
              <h4>{{ member.name }}</h4>
              <p>{{ member.age }}岁</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 详细信息 -->
    <div class="team-detail-info">
      <h3>详细信息</h3>
      <!-- 这里可以添加更多详细信息 -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const router = useRouter()
const searchText = ref('')
const selectedVehicle = ref('small')
const needPackage = ref(false)

// 模拟数据
const teamInfo = reactive({
  team_name: '货拉拉',
  create_time: '2023-04-20 15:48:17',
  team_img: '/public/qrcode.png',
  contact_name: '团队一老大',
  contact_phone: '15678962541',
  team_info: '搬家公司团队一高介搬家公司团队一高介搬家公司团队一高介'
})

const teamMembers = ref([
  {
    id: 1,
    name: '团队一老大',
    age: 30,
    avatar: '/path/to/avatar1.jpg'
  },
  {
    id: 2,
    name: '小强一',
    age: 20,
    avatar: '/path/to/avatar2.jpg'
  }
])

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 处理预约
const handleBook = () => {
  router.push({
    path: '/order',
    query: {
      teamId: 1,
      vehicleType: selectedVehicle.value,
      needPackage: needPackage.value
    }
  })
}

// 处理反馈
const handleFeedback = () => {
  router.push({
    path: '/feedback',
    query: {
      teamId: 1
    }
  })
}
</script>

<style scoped>
.team-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-header {
  text-align: center;
  margin-bottom: 30px;
}

.search-header h1 {
  margin-bottom: 20px;
}

.search-box {
  max-width: 600px;
  margin: 0 auto;
}

.team-info {
  margin-bottom: 30px;
}

.info-time {
  color: #999;
  margin: 10px 0;
}

.info-main {
  display: flex;
  gap: 30px;
}

.info-image {
  width: 400px;
  height: 300px;
}

.info-content {
  flex: 1;
}

.info-item {
  margin-bottom: 15px;
}

.label {
  color: #666;
  margin-right: 10px;
}

.vehicle-select,
.package-select {
  margin: 20px 0;
}

.action-buttons {
  margin-top: 30px;
}

.team-members {
  margin: 30px 0;
}

.member-avatar {
  width: 100%;
  height: 200px;
}

.member-info {
  padding: 10px;
  text-align: center;
}

.member-info h4 {
  margin: 0;
}

.member-info p {
  color: #666;
  margin: 5px 0 0;
}
</style>